<template>
  <div>
    <el-upload
      v-bind="{ ...item }"
      :action="item.action"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :on-success="uploadSuccess"
      :on-progress="handleProgress"
      list-type="picture-card"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-image-viewer
      v-if="showViewer"
      :z-index="9999"
      :on-close="handleCloseImageViewer"
      :initial-index="showImageIndex"
      :url-list="urlList"
    />
  </div>
</template>

<script>
import uploadMixin from '../uploadMixin'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: 'TImageUpload',
  mixins: [uploadMixin],
  components: {
    'el-image-viewer': ElImageViewer
  },
  data() {
    return {
      showViewer: false,
      showImageIndex: 0
    }
  },
  computed: {
    urlList() {
      return this.changeValue.map((item) => item.url)
    }
  },
  methods: {
    // 上传成功
    handlePictureCardPreview(file) {
      // 找到下标
      this.showImageIndex = this.changeValue.findIndex((item) => item.url === file.url)
      this.showViewer = true
    },
    // 关闭图片预览
    handleCloseImageViewer() {
      this.showViewer = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
